<template>
  <div>
    <el-form
    v-if="operateType==='login'"
    :model="form"
    status-icon
    :rules="rules"
    ref="form"
    label-width="100px"
    class="login-container"
  >
    <el-form-item label="用户名" label-width="80px"   prop="user_name" class="username">
      <el-input
        type="input"
        size="small"
        v-model="form.user_name"
        autocomplete="off"
        placeholder="请输入账号"
        pattern="^\d{6,10}$"
        required
      ></el-input>
    </el-form-item>
    <el-form-item label="密码" label-width="80px" prop="password">
      <el-input
        type="password"
        v-model="form.password"
        autocomplete="off"
        placeholder="请输入密码"
        pattern="^[a-z]\w{5,15}$"
        required
      ></el-input>
    </el-form-item>
      <el-button type="danger" size="medium" @click="login" class="longin_submit" style="width:80%;margin:0 10%"><input type="submit" value="登录"></el-button>
    <div class="help">
        <div class="register">
            我还没有账号？
            <el-button style="border:none;font-size:12px;color:#88C968;padding:0" @click="goregister">马上注册</el-button>
        </div>
        <div>
            <el-button style="border:none;font-size:12px;color:#88C968;padding:0" @click="register">忘记密码</el-button>
        </div>
    </div>
  </el-form>
  <el-form
    v-if="operateType==='register'"
    :model="form"
    status-icon
    :rules="rules"
    ref="form"
    label-width="100px"
    class="login-container"
  >
    <el-form-item label="用户名" label-width="80px"   prop="user_name" class="username">
      <el-input
        type="input"
        size="small"
        v-model="form.user_name"
        autocomplete="off"
        placeholder="请输入账号"
        pattern="^\d{6,10}$"
        required
      ></el-input>
    </el-form-item>
    <el-form-item label="密码" label-width="80px" prop="password">
      <el-input
        type="password"
        v-model="form.password"
        autocomplete="off"
        placeholder="请输入密码"
        pattern="^[a-z]\w{5,15}$"
        required
      ></el-input>
    </el-form-item>
    <!-- <el-form-item label="密码" label-width="80px" prop="password">
      <el-input
        type="password"
        v-model="form.passwords"
        autocomplete="off"
        placeholder="请再次输入密码"
        pattern="^[a-z]\w{5,15}$"
        required
      ></el-input>
    </el-form-item> -->
    <div class="deal">
      <el-checkbox  style="font-size:12px">我已阅读并同意<a href="#" style="color:#88C968">DFYS平台用户协议</a></el-checkbox>
    </div>
    <el-button type="danger" size="medium" @click="register" class="longin_submit" style="width:80%;margin:0 10%"><input type="submit" value="同意协议并注册"></el-button>
    <div class="help">
        <div class="register">
            已有账号？
            <el-button style="border:none;font-size:12px;color:#88C968;padding:0" @click="goLogin">去登录</el-button>

        </div>

    </div>
  </el-form>
  </div>
</template>
<script>
  import axios from 'axios'
export default {

  data() {
    return {
      form: {
        user_name: "",
        password: "",
      },
      rules: {
        user_name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            message: "用户名长度不能小于3位",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  computed:{
    operateType(){
      return this.$store.state.operateType
    }
  },
  methods: {
    login() {
      if (this.form.user_name===''||this.form.password==='') {
        alert('账户或密码不能为空')
      } else {
        this.$emit('hidden',this.form.user_name)
        localStorage.setItem('user_name',this.form.user_name)
        localStorage.setItem('password',this.form.password)
        // axios({
        //   url:'http://127.0.0.1:8000/userLogin/',
        //   methods:"get",
        //   params:this.form
        // }).then((res)=>{
        //   console.log(res.data.data)
        //   this.$emit('hidden',this.form.user_name)
        // localStorage.setItem('user_name',this.form.user_name)
        // localStorage.setItem('password',this.form.password)
        //   // if (res.data.code==200) {
        //   //    this.$router.push({ name: "home" });
        //   //   //  this.$store.
        //   //   this.$emit('hidden',this.form.user_name)
        //   // }else {
        //   //   //如果失败 提示失败信息
        //   //   this.$message.warning(res.data.message);
        //   // }
        //   this.$store.commit('User',true)
        // })
      }
        
        
      
      
    },
    goLogin(){
      this.$store.commit('Cut','login')
      
    },
    goregister(){
      this.$store.commit('Cut','register')
    },
    register(){

      
      axios({
        url:'http://127.0.0.1:8000/userRegist/',
        methods:"get",
        params:this.form
      }).then((res)=>{
        console.log(res.data.data)
        if (res.data.code==200) {
           this.$store.commit('Cut','login')
           alert(res.data.message)
        }else {
          //如果失败 提示失败信息
          this.$message.warning(res.data.message);
        }
      })
    }
  },

};
</script>

<style scoped>
.el-form-item__content{
    width: 200px;
    margin-left: 0;
}
.login-container {
  width: 300px; /*表单宽度*/
  margin: 0 auto;
  background: #fff;

}

.login_title {
  margin: 0px auto 40px auto; /*上边界0 下边边界40 左右居中*/
  text-align: center; /*上面仅是标签居中 这里是文字居中*/
  color: #505458;
}

.longin_submit {
  margin: 10px auto 0px auto; /*上边界10 下边边界40 左右居中*/
}
.help{
    display: flex;
    justify-content: space-between;
}
input{
  background: none;
  border: none;
}
</style>
